<template>

	<view class="task">
		<!-- 新建巡检任务 -->
		<view class="new-task">
			<view class="task-style">
				<view class="task-name">
					<text>任务名称：</text>
					<input v-model="taskName" placeholder=" 请输入任务名称" />
				</view>
				<view class="task-project">
					<text>选择项目：</text>
					<picker :value="taskProject" :range="projects" range-key="name" class="project-picker"
						@change="tashChange">
						<view class="picker-content">
							{{ taskProject ? taskProject : ' 请选择项目名称' }}
						</view>
					</picker>
				</view>
				<view class="task-describe">
					<text>任务描述：</text>
					<input v-model="taskDescribe" placeholder=" 请输入任务描述" />
				</view>
				<view class="saveButton">
					<button @click="saveTask">保存任务</button>
				</view>
			</view>
		</view>

		<!-- 巡检任务列表 -->
		<view class="project-task-list">
			<view class="title-list">
				<view class="header-item" style="flex: 1;">序号</view>
				<view class="header-item" style="flex: 2;">任务名称</view>
				<view class="header-item" style="flex: 2;">项目名称</view>
				<view class="header-item" style="flex: 2;">任务描述</view>
				<view class="header-item" style="flex: 1;">操作</view>
			</view>

			<view class="task-list">
				<view class="task-item" v-for="(task, index) in tasks" :key="task.id">
					<view class="task-detail" style="flex: 1;">{{ index + 1 }}</view>
					<view class="task-detail" style="flex: 2;">{{ task.name }}</view>
					<view class="task-detail" style="flex: 2;">{{ task.programName }}</view>
					<view class="task-detail" style="flex: 2;">{{ task.descp }}</view>
					<view class="task-detail" style="flex: 1;">
						<button @click="exportTask(task)">导出</button>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import request from '@/util/request/request.js'
	import {
		closeDatabase,
	} from '@/util/sqliteHelper.js'
	export default {
		name: 'TaskList',
		data() {
			return {
				taskName: '', //任务名称
				taskProject: '', //
				projects: [], // 存储项目数据
				tasks: [], // 存储任务数据
				taskDescribe: '', // 任务描述
				downloadPath: '_doc/cable' // 指定保存路径
			};
		},

		async mounted() {
			await this.fetchHeadData();
			await this.fetchTasks();
		},
		methods: {
			tashChange(val) {
				this.taskProject = this.projects[val.detail.value].name
				this.taskProjectId = this.projects[val.detail.value].id
				console.log('选中的项目名称id', this.taskProjectId)

			},
			//选择项目名称
			async fetchHeadData() {
				const apiUrl = 'http://cable.auto-sense.com.cn:19527/api/program/listAll'; // 替换为实际 API URL
				try {
					const res = await request({
						url: apiUrl,
						timeout: 10000 // 增加超时时间，单位为毫秒
					});
					if (res.status === 'SUCCESS') {
						this.projects = res.result; // 返回的数据在 res.result 中
						console.log('获取项目名称成功，结果为:', res); // 打印后台返回的结果
					} else {
						console.error('获取项目名称失败，状态不是 SUCCESS:', res);
					}
				} catch (error) {
					console.error('获取项目名称失败:', error);
				}
			},
			//任务列表
			async fetchTasks() {
				const apiUrl = 'http://cable.auto-sense.com.cn:19527/api/site/task/program_task';
				try {
					const res = await request({
						url: apiUrl,
						timeout: 10000 // 增加超时时间，单位为毫秒
					});
					if (res.status === 'SUCCESS') {
						this.tasks = res.result; // 返回的数据在 res.result 中
						console.log('获取任务列表成功，结果为:', res); // 打印后台返回的结果
					} else {
						console.error('获取任务列表失败，状态不是 SUCCESS:', res);
					}
				} catch (error) {
					console.error('获取任务列表失败:', error);
				}

			},
			//保存任务
			async saveTask() {
				if (!this.taskName) {
					uni.showToast({
						title: '请填写名称',
						icon: 'none',
						duration: 2000,
					});
					return;
				}

				if (!this.taskDescribe) {
					uni.showToast({
						title: '请填写描述',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				const taskData = {
					name: this.taskName,
					descp: this.taskDescribe,
					programIdx: this.taskProjectId
				};

				const apiUrl = 'http://cable.auto-sense.com.cn:19527/api/site/task';
				try {
					const res = await request({
						url: apiUrl,
						method: 'POST',
						data: taskData,
					});

					if (res.status === 'SUCCESS') {
						uni.showToast({
							title: '任务保存成功',
							icon: 'success',
							duration: 2000,
						});
						console.log('任务保存成功')
						// 重置输入框
						this.taskName = '';
						this.taskDescribe = '';
						// 刷新任务列表
						this.fetchTasks();
					} else {
						uni.showToast({
							title: '保存任务失败',
							icon: 'none',
							duration: 2000
						});
					}
				} catch (error) {
					uni.showToast({
						title: '保存任务失败',
						icon: 'none',
						duration: 2000
					});
					console.error('保存任务失败:', error);
				}
			},
			//导出操作
			async exportTask(task) {
				const apiUrl =
					`http://cable.auto-sense.com.cn:19527/api/site/task/export-program-task?taskId=${task.id}`;
				console.log('导出项目id为：', task.id)
				const accessToken = uni.getStorageSync("accessToken"); // 获取访问 token
				const refreshToken = uni.getStorageSync("refreshToken"); // 获取刷新 token
				const cookieValue = `xr_access_token=${accessToken}; ${refreshToken}`;
				const header = {
					'Content-Type': 'application/json',
					'Authorization': `Bearer ${accessToken}`,
					'Cookie': cookieValue,
				}
				try {
					// 使用 Promise 包装 uni.downloadFile 方法，以便使用 async/await
					const downloadResult = await new Promise((resolve, reject) => {
						uni.downloadFile({
							url: apiUrl, // 下载资源的 URL
							header,
							success: (res) => {
								// 如果下载成功，返回包含临时文件路径的结果
								if (res.statusCode === 200) {
									console.log('下载临时文件成功', res);
									resolve(res);
								} else {
									// 如果服务器返回的状态码不是 200，打印状态码并抛出错误
									console.error('下载失败，状态码:', res.statusCode);
									reject(new Error(`下载失败，状态码: ${res.statusCode}`));
								}
							},
							fail: (err) => {
								// 如果下载请求失败，抛出错误
								reject(err);
							}
						});
					});
					// 获取文件系统管理器
					let fs;
					try {
						if (typeof plus !== 'undefined') {
							const fs = plus.io;
							// 使用 fs 进行文件操作
							console.log('获取文件系统管理器成功:', fs);
						} else {
							console.error('plus 对象不存在');
							throw new Error('plus 对象不存在');
						}
						// 设置指定的保存路径和名称
						const targetPath = '_doc/cable'; // 修改为你需要的文件名和路径
						// 使用文件系统管理器将临时文件移动到指定路径
						const tempFilePath = downloadResult.tempFilePath;
						uni.saveFile({
							tempFilePath: tempFilePath, // 临时文件路径
							filePath: targetPath, // 目标保存路径
							success: (saveFileRes) => {
								// 保存成功，saveFileRes.savedFilePath 是保存后的文件路径
								console.log('文件已保存到以下路径:', saveFileRes.savedFilePath);
								uni.showToast({
									title: '文件已保存!',
									icon: 'success',
									duration: 3000 // 提示显示3秒
								});
							},
							fail: (error) => {
								console.error('保存文件失败:', error);
							}
						});

					} catch (err) {
						console.error('获取文件系统管理器失败:', err);
						throw new Error('获取文件系统管理器失败');
					}


				} catch (error) {
					// 捕获并处理任何下载或保存过程中发生的错误
					console.error('下载或保存文件时发生错误:', error);
				}
			}

		},
	};
</script>

<style lang="scss">
	.task {
		width: 100%;
		background: #139c99;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 让内容居中对齐 */

		.new-task {
			width: 100%;

			.task-style {
				margin-top: 30rpx;
				width: 100%;
				/* 使输入框更宽，适应手机屏幕 */
				display: flex;
				flex-direction: column;
				align-items: center;

				.task-name,
				.task-project,
				.task-describe {
					width: 600rpx;
					height: 60rpx;
					display: flex;

					text {
						color: #fff;
						font-size: 28rpx;
					}

					input,
					select {
						height: 43rpx;
						border-radius: 5rpx;
						background: #fff;
						width: 50%;
						/* 全宽 */
						font-size: 15rpx;
						margin-left: 10rpx;
						/* 增加左右间距 */
						color: #000;
					}
				}

				.project-picker {
					height: 43rpx;
					border-radius: 5rpx;
					background: #fff;
					width: 50%;
					/* 全宽 */
					font-size: 15rpx;
					margin-left: 10rpx;
					/* 增加左右间距 */
					display: flex;
					align-items: center;
				}


				.saveButton {
					margin: 10rpx 0;

					button:hover {
						background-color: #808080;
						/* 鼠标悬停时改变按钮背景颜色，提供反馈 */
					}

					button {
						height: 55rpx;
						width: 300rpx;
						font-size: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #fff;
						color: #000;
					}
				}
			}
		}

		.project-task-list {
			width: 100%;
			display: flex;
			flex-direction: column;
		}

		.title-list,
		.task-item {
			display: flex;
			/* 使用 flex 布局，使子元素水平排列 */
			justify-content: space-between;
			/* 子元素之间均匀分布 */
			border-bottom: 1rpx solid #ddd;
			/* 添加底部边框，分隔行 */
			border-top: 1rpx solid #ddd;
			/* 添加顶部边框，分隔行 */
			background: #fff;
		}

		.header-item,
		.task-detail {
			padding: 10rpx;
			/* 添加内边距，使文本与边框之间有空间 */
			text-align: center;
			/* 文本居中对齐 */
			border-right: 1rpx solid #ddd;
			/* 添加右侧边框，分隔列 */
		}

		.title-list .header-item {
			background-color: #dedede;
			/* 设置表头背景颜色为浅灰色 */
		}

		.task-item {
			border-bottom: 1px solid #eee;
			/* 所有行的底部边框 */
		}

		.task-item:last-child {
			border-bottom: 1px solid #eee;
			/* 保留最后一行的底部边框 */
			/* 如果需要，可以在这里添加其他样式 */
		}

		.task-detail:last-child {
			border-right: none;
			/* 移除每一行最后一列的右侧边框，避免多余的线条 */
		}

		button {
			background-color: #fff;
			/* 设置按钮背景颜色为蓝色 */
			color: #000;
			/* 设置按钮文字颜色为白色 */
			border: none;
			/* 移除按钮边框 */
			padding: 5rpx 5rpx;
			/* 添加内边距，使按钮看起来更美观 */
			cursor: pointer;
			/* 鼠标悬停时显示指针，表示可点击 */
			font-size: 20rpx;
			align-items: center;
		}

		button:hover {
			background-color: #139c99;
			/* 鼠标悬停时改变按钮背景颜色，提供反馈 */
		}
	}
</style>